import React, { Component } from 'react'
import { NavBar, SearchBar } from 'antd-mobile';

import myaxios from "../../utils/myaxios"
import "./Category.scss"
class Category extends Component {
    state = {
        categories: [],//返回的菜单数据
        categories_content: [], // 右边菜单渲染的内容
        select_index: 0

    }
    handleItemClick = (e) => {

        //获取点击选中的项
        let select_index = e.target.getAttribute("data-index");
        console.log(select_index);
        console.log(e.target);
      
        this.setState({
            select_index: parseInt(select_index),
            // 点击类之后出现的子元素
            categories_content: this.state.categories[select_index].children

        })
        console.log(this.state.categories[select_index].children);

    }
   
    //获取分类菜单的数据

    getCategories = (params) => {
        myaxios.get("categories").then(res => {
            this.setCategories(res)
        }).catch((err) => console.log(err))
    }


    // 设置本地数据缓存


    // is_storaged 代表是否之前已经缓存过
    setCategories = (res, is_storaged) => {
        //缓存请求的数据
        let categories_cache = {}
        if (is_storaged) {
            //有缓存 直接获取
            categories_cache = JSON.parse(localStorage.getItem("categories_cache"))
        } else {
            categories_cache = { data: Date.now(), categories: res }
        }
        //缓存到本地中
        localStorage.setItem("categories_cache", JSON.stringify(categories_cache));
        this.setState({
            categories: res,
            categories_content: res[0].children,
        })

    }

    componentDidMount() {
        // https://www.linweiqin.cn/api/public/v1/categories
        // 进来的时候 先判断本地缓存是否过期
        // 如果没有过期的情况下 直接获取本地的缓存

        let categories_cache = localStorage.getItem("categories_cache")
        //如果本地緩存不為空
        if (categories_cache) {
            //先判斷是否過期
            //当前时间
            let current_time = Date.now();
            //存储时间
            let storage_time = JSON.parse(categories_cache).date;
            if (current_time - storage_time > 60 * 60 * 1000) {
                //一小时过期
                this.getCategories();
            } else {
                // 缓存没有 过期
                //第二个参数 代表是否已经缓存
                this.setCategories(JSON.parse(categories_cache).categories, true);
            }
        } else {
            this.getCategories()
        }

    }

    // 右边图片点击的时候
    handleProductItemClick = (e) => {
        let cid = e.target.getAttribute("data-index");
        console.log(this.props);
        console.log(cid);
        // this.props.history.push("/goodList/" + cid);

    };

    render() {
        return (
            <div className="category">
                {/* 导航条 */}
                <div className="category-nav">
                    <NavBar className="nav">商品分类</NavBar>
                </div>
                {/* 导航条结束 */}

                {/* 搜索栏开始 */}
                <div className="category-search">
                    <SearchBar placeholder="Search" maxLength={8} />
                </div>
                {/* 搜索栏结束 */}

                {/* 分类菜单开始 */}
                <div className="category-content">
                    {/* 利用冒泡点击事件 */}
                    <div className="content-left" onClick={this.handleItemClick}>
                        {this.state.categories.map((v, index) => {
                            return (
                                <div
                                    data-index={index}
                                    className={
                                        this.state.select_index === index
                                            ? "active content-left-item"
                                            : "content-left-item"
                                    }
                                    key={v.cat_id}
                                >
                                    {v.cat_name}
                                </div>
                            );
                        })}
                    </div>
                    {/* 右侧内容开始 */}
                    <div className="content-right">
                        {this.state.categories_content.map((v, i) => {
                            return (
                                <div className="content-right-item" key={v.cat_id}>
                                    {/* 二级菜单标题开始 */}
                                    <div className="right-item-title">
                                        {"/"}
                                        {v.cat_name}
                                        {"/"}
                                    </div>
                                    {/* 二级菜单标题结束 */}
                                    {/* 产品列表开始 */}
                                    <div
                                        className="product-list"
                                        onClick={this.handleProductItemClick}
                                    >
                                        {v.children &&
                                            v.children.map((v) => {
                                                return (
                                                    <div
                                                        key={v.cat_id}
                                                        className="product-list-item"
                                                        data-index={v.cat_id}
                                                    >
                                                        <div className="imagerWrapper">
                                                            <img
                                                                src={v.cat_icon}
                                                                alt=""
                                                                data-index={v.cat_id}
                                                            />
                                                        </div>
                                                        <div className="item-title">{v.cat_name}</div>
                                                    </div>
                                                );
                                            })}
                                    </div>
                                    {/* 产品列表结束 */}
                                </div>
                            );
                        })}
                    </div>
                    {/* 右侧内容结束 */}
                </div>
                {/* 分类菜单结束 */}
            </div>
        )
    }
}
export default Category 
